<template>
  <el-dialog
    :title="view === 'detail'? '商品信息详情': ''"
    :visible="true"
    custom-class="orderDetailWrapper"
    :before-close="closeDialog"
    >
    <vue-body>
    	<el-form :model="tableData" label-width="80px">
    		<el-form-item label="商品编号">
        	<el-input v-model="tableData.productNo" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品名称">
        	<el-input v-model="tableData.productName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品原价">
        	<el-input v-model="tableData.originalPrice" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="结算金额">
        	<el-input v-model="tableData.closingAmt" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品类别编号">
        	<el-input v-model="tableData.categoryNo" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品类别名称">
        	<el-input v-model="tableData.categoryName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="商品规格集合" v-if="this.tableData.specList != ''">
          <el-table
            :data="tableData.specList"
            style="width: 100%">
            <el-table-column
                prop="specId"
                label="规格组合id"
                >
              </el-table-column>
              <el-table-column
              prop="specName"
                label="规格组合名称"
                >
              </el-table-column>
                <el-table-column
                prop="specPrice"
                label="规格价格"
                >
              </el-table-column>
            </el-table>
      	</el-form-item>
      	<el-form-item label="兑换规则">
      		<div class="productDetailsBox">
      			<div class="productDetailsContent">
      				<div v-html="this.tableData.productDetails">
      				</div>
          	</div>
          </div>
      	</el-form-item>
      	<el-form-item label="商品状态">
      		<div class="typeBox">
            {{this.tableData.status | status }}
          </div>
      	</el-form-item>
      	<el-form-item label="序号">
        	<el-input v-model="tableData.serialNumber" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="上线时间">
        	<el-input v-model="tableData.onlineTime" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品类型">
      		<div class="typeBox">
            {{this.tableData.productType | productType }}
          </div>
      	</el-form-item>
      	<el-form-item label="销售价格">
        	<el-input v-model="tableData.salePrice" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="运费">
        	<el-input v-model="tableData.freight" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="销量">
        	<el-input v-model="tableData.sales" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="支付方式">
      		<div class="typeBox">
            {{this.tableData.payMethod | payMethod }}
          </div>
      	</el-form-item>
      	<el-form-item label="库存数量" v-if="this.tableData.productType == '3'">
        	<el-input v-model="tableData.number" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="有效期开始时间" v-if="this.tableData.productType == '3'">
        	<el-input v-model="tableData.startDate" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="有效期结束时间" v-if="this.tableData.productType == '3'">
        	<el-input v-model="tableData.endDate" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="商品图片">
      		<div class="imgBox">
        	<!--<el-input v-model="tableData.industry" auto-complete="off" readonly="readonly"></el-input>-->
        		<img class="logoImg" :src="imgSrc(tableData.picUrl)"/>
        	</div>
      	</el-form-item>
    	</el-form>
    </vue-body>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryPro} from "@/services/product";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      tableData: {},
      id:""
      
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit() {
    	this.$emit("close");
    },
    imgSrc(data){
      	return this.$store.state.imgUrl + data;
    },
    async loadData () {
        this.loading = true
        try {
          let data = await queryPro(this.id)
          // debugger
//        console.log(data)
          this.tableData = data
          console.log(typeof(this.tableData.productDetails))
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
  },
  mounted() {
  	
  },
  filters: {
      productType (value) {
      	//订单状态
        return {'1': '实物', '2': '彩票','3':'券/虚拟','4':'优惠券'}[value]
      },
      distributionStatus (value) {
      	//配送状态
        return {'01': '待发货', '02': '已发货'}[value]
      },
      payMethod (value) {
      	//支付方式
        return {'1': 'RMB', '2': '积分','3':'积分+RMB'}[value]
      },
      status(value) {
      	//是否需要物流
        return {'0': '下架', '1': '上架'}[value]
      },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.specwapper{
  background-color: #fff;
  border: 1px solid #bfcbd9;
  border-bottom: 0;
  border-radius: 4px;
}
.specBox{
    background-image: none;
    box-sizing: border-box;
    border-bottom: 1px solid #bfcbd9;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.specBox span{
 padding-left: 10px;
 color: #777777;
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
.productDetailsBox{
    border-radius: 4px;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    padding: 3px 10px;
    height: 870px;
    width: 426px;
    background: url(../../images/bgiphone.png) no-repeat;
    background-size:426px 870px;
    position: relative;
}
.productDetailsContent{
		position: absolute;
		height: 647px;
    width: 375px;
    left: 26px;
    top: 118px;
    font-size: inherit;
    overflow-y: scroll;
}
textarea{ 
	resize:none;
}
</style>
